<template>
  <el-card>
    <div style="margin-bottom: 20px; font-weight:bold; font-size: 20px;color: #666;">商家小程序</div>
    <div class="filter-container">
      <div class="list-search">
        <el-form label-suffix="：" label-position="right" label-width="90px">
          <el-form-item label="关键词">
            <el-input v-model="kwValue" size="medium" placeholder="请输入内容" class="input-with-select" @keyup.enter.native="onFilter">
              <el-select slot="prepend" v-model="kw" class="input-select" size="medium" placeholder="请选择">
                <el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-input>
          </el-form-item>
          <el-form-item label="授权状态">
            <el-radio-group v-model="state">
              <el-radio :label="-1">全部</el-radio>
              <el-radio :label="1">正常</el-radio>
              <el-radio :label="0">授权异常</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="审核状态">
            <el-radio-group v-model="inAudit">
              <el-radio :label="-1">全部</el-radio>
              <el-radio :label="0">无</el-radio>
              <el-radio :label="1">审核中</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item><el-button type="primary" size="small" round icon="el-icon-search" @click="onFilter">查 询</el-button></el-form-item>
        </el-form>
      </div>

      <div class="filter-action" />
    </div>

    <el-table :data="wxappList" style="width: 100%">
      <el-table-column prop="appName" width="166" label="小程序名称" />

      <el-table-column prop="businessName" label="商户名称" />

      <el-table-column prop="appId" width="166" label="appId" />

      <el-table-column prop="classifyId" width="200px" label="模板类型">
        <template slot-scope="scope">
          <span>【{{ classifyMap[scope.row.classifyCode] }}】</span>
          -
          <span>{{ tplMap[scope.row.classifyCode + scope.row.templateCode] }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="onlineStatus" label="线上小程序">
        <template slot-scope="scope">
          <div v-if="scope.row.onlineVersionId !== 0">
            <el-tag v-if="scope.row.onlineStatus === 1" :closable="false" type="success" t>{{ scope.row.onlineVersionNum }}</el-tag>
            <el-tag v-if="scope.row.onlineStatus === 0" :closable="false" type="danger">{{ scope.row.onlineVersionNum }}</el-tag>
          </div>
          <div v-else>-</div>
        </template>
      </el-table-column>

      <el-table-column prop="auditStatus" label="审核小程序">
        <template slot-scope="scope">
          <div v-if="scope.row.auditVersionId !== 0">
            <el-tag v-if="scope.row.auditStatus === 2" :closable="false" type="success" t>{{ scope.row.auditVersionNum }} - 审核中</el-tag>
            <el-tag v-if="scope.row.auditStatus === 1" :closable="false" type="danger">{{ scope.row.auditVersionNum }} - 审核不通过</el-tag>
          </div>
          <div v-else>-</div>
        </template>
      </el-table-column>

      <el-table-column prop="autoUpdate" label="自动更新">
        <template slot-scope="scope">
          <div v-if="scope.row.autoUpdate !== 0">是</div>
          <div v-else>否</div>
        </template>
      </el-table-column>

      <el-table-column prop="state" label="授权状态 ">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.state === 1" :closable="false" type="success" t>正常</el-tag>
          <el-tag v-else :closable="false" type="danger" t>授权异常</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="remark" label="状态说明">
        <template slot-scope="scope">
          <div v-if="scope.row.state === 1">/</div>
          <div v-else>{{ scope.row.remark }}</div>
        </template>
      </el-table-column>

      <el-table-column prop="createTime" label="创建时间" />

      <el-table-column prop="option" align="center" label="操作">
        <template slot-scope="scope">
          <el-button :disabled="scope.row.state !== 1" type="text" size="small" @click="handleSelect(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      class="pagination"
      :current-page.sync="pageNum"
      :page-size="pageSize"
      layout="total, prev, pager, next"
      :total="total"
      @current-change="handleCurrentChange"
    />
  </el-card>
</template>

<script>
import { getWxappPage } from '@/api/wxapp'
import { getClassifyTplMap } from '@/api/wxappClassify'

export default {
  name: 'WxappRelation',
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      total: 0,
      wxappList: [],
      kw: 'businessName',
      kwValue: '',
      state: -1,
      inAudit: -1,
      selectOptions: [
        {
          value: 'appId',
          label: 'AppId'
        },
        {
          value: 'nickName',
          label: '小程序名称'
        },
        {
          value: 'businessName',
          label: '商户名称'
        }
      ],
      classifyMap: {},
      tplMap: {}
    }
  },
  mounted() {
    getClassifyTplMap().then(res => {
      this.classifyMap = res.data[0]
      this.tplMap = res.data[1]
    })
    this.getWxappList()
  },
  methods: {
    handleSelect(data) {
      this.$router.push({ name: 'wxappDetail', params: { wxappRelationId: data.id } })
    },
    handleCurrentChange(data) {
      this.pageNum = data
      this.getWxappList()
    },
    getWxappList() {
      const data = {
        state: this.state,
        inAudit: this.inAudit,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        scope: 2
      }
      if (this.kwValue) {
        data[this.kw] = this.kwValue
      }
      return getWxappPage(data).then(resp => {
        this.wxappList = resp.data.row
        this.total = resp.data.total
      })
    },
    onFilter() {
      this.getWxappList()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.pagination {
	margin-top: 10px;
}

/* 筛选 */
.filter-container {
	margin-bottom: 20px;
	padding-left: 2px;
}

.filter-action {
	display: flex;
}

.list-search {
	display: block;

	.el-select {
		width: 360px;
	}

	.input-select {
		width: 120px;
	}

	.el-form-item {
		margin-bottom: 10px;
	}

	.input-with-select {
		width: 360px;
	}
	.input-with-select .el-input-group__prepend {
		background-color: #fff;
	}
}
// .el-radio__inner:hover {
// 	border-color: $btnBgc;
// }
// .el-radio__input.is-checked .el-radio__inner {
// 	border-color: $btnBgc;
// 	background-color: $btnBgc;
// }
// .el-radio__input.is-checked + .el-radio__label {
// 	color: $btnBgc;
// }
// .el-button--small.is-round {
// 	border-color: $btnBgc;
// 	background-color: $btnBgc;
// }
// // .el-button--text {
// // 	color: $btnBgc;
// // }
// // .el-button--text:hover {
// // 	color: $btnBgc;
// // }
// .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
// 	background-color: $overBgc;
// }
</style>
